<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		section {
			width: 800px;
			height: 300px;
			border:1px solid red;
			display: flex;
			/*flex-wrap: nowrap; *//*默认值，多出的不换行，直接压缩显示*/
			/*flex-wrap: wrap; */    /*多出的换行显示*/
			flex-wrap: wrap-reverse;   多出的从下往上换行
		}
		div {
			height: 100px;
			width: 200px;
			background-color: pink;

		}
		div:first-child {
			background-color: blue;
		}
		
		div:nth-child(2) {
			background-color: purple;
		}
		div:nth-child(3) {
			background-color: red;
		}
		div:last-child {
			background-color: black;
		}

	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>